<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 10px auto; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;margin-top: 8px; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .top-right-btn { position: absolute; top: 20px; right: 20px; }
    </style>
</head>
<body>
    <div class="container">

        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
    <script type="text/html" id="toolbarHead">
         <button type="button" class="layui-btn layui-btn-sm" onclick="addUser()">
                <i class="layui-icon layui-icon-add-1"></i> 添加用户</button>
    </script>
    <script type="text/html" id="barDemo">
        <div class="layui-clear-space">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
        </div>
    </script>

    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var windowHeight = window.innerHeight;
            var tableHeight = windowHeight - 50; // 减去其他元素的高度和一些边距

            // 渲染表格
            table.render({
                elem: '#userTable',
                url: '/getUsers',
                height: tableHeight,
                toolbar: '#toolbarHead',
                even: true,
                // page: true,
                cols: [[
                    {#{type: 'checkbox', fixed: 'left'},#}
                    {field: 'uid', title: 'ID', width: 80, sort: true, align: 'center', hide: true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'name', title: '用户名', width: 150, align: 'center', headerTool: 'filterName'},
                    {field: 'state', title: '状态', width: 90, align: 'center', sort: true, headerTool: 'filterState'},
                    {field: 'role', title: '角色', width: 100, align: 'center', headerTool: 'filterRole'},

                    {field: 'phone', title: '电话', width: 120, align: 'left'},
                    {field: 'email', title: '邮箱', width: 180, align: 'left'},
                    {field: 'customer_name', title: '所属企业', width: 250, align: 'center', headerTool: 'filterCustomer'},
                    {field: 'remark', title: '备注', align: 'left'},
                    {fixed: 'right', title: '操作', width: 130, minWidth: 125, align: 'center', toolbar: '#barDemo'}
                ]],
                done: function () {
                    console.log('表格渲染完成');
                }
            });

            // 表头工具栏事件
            table.on('headerTool(userTable)', function (obj) {
                var field = obj.field;
                var value = obj.value;
                var layEvent = obj.config.event;

                switch (layEvent) {
                    case 'filterName':
                        filterTable(field, value);
                        break;
                    case 'filterRole':
                        filterTable(field, value);
                        break;
                    case 'filterCustomer':
                        filterTable(field, value);
                        break;
                    case 'filterState':
                        filterTable(field, value);
                        break;
                }
            });

            // 过滤表格数据
            function filterTable(field, value) {
                table.reload('userTable', {
                    where: {
                        [field]: value
                    }
                });
            }

            // 表格工具栏事件
            table.on('tool(userTable)', function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case 'edit':
                        editUser(data);
                        break;
                    case 'delete':
                        deleteUser(data.uid);
                        break;
                }
            });

            // 添加用户
            window.addUser = function () {
                layer.open({
                    title: '添加用户',
                    type: 2,
                    content: '/addUserForm',
                    area: ['500px', '500px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('userForm');
                        var formData = new FormData(submitForm);
                        fetch('/addUser', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('userTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 编辑用户
            window.editUser = function (user) {
                layer.open({
                    title: '编辑用户',
                    type: 2,
                    content: '/editUserForm?uid=' + user.uid,
                    area: ['500px', '500px'],
                    btn: ['确认', '取消'],
                    yes: function (index, layero) {
                        var iframeWindow = window['layui-layer-iframe' + index];
                        var submitForm = iframeWindow.document.getElementById('userForm');
                        var formData = new FormData(submitForm);
                        formData.append('uid', user.uid);
                        fetch('/editUser', {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            layer.msg(data.msg);
                            table.reload('userTable');
                            layer.close(index);
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 删除用户
            window.deleteUser = function (uid) {
                layer.confirm('确定要删除该用户吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    fetch(`/deleteUser/${uid}`, {
                        method: 'DELETE'
                    })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg(data.msg);
                        table.reload('userTable');
                    });
                }, function () {
                    layer.msg('已取消删除');
                });
            };
        });
    </script>
</body>
</html>